<!DOCTYPE html>
<div id="pass" style="visibility: hidden">PASS</div>
<div id="fail" style="visibility: visible">FAIL</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
var test = async_test("Test changing in animation frame");
requestAnimationFrame(test.step_func_done(() => {
  document.getElementById('pass').animate([{visibility: 'visible'}, {visibility: 'visible'}], {fill: 'forwards'});
  document.getElementById('fail').animate([{visibility: 'hidden'}, {visibility: 'hidden'}], {fill: 'forwards'});
  assert_equals(getComputedStyle(document.getElementById('pass')).visibility, "visible");
  assert_equals(getComputedStyle(document.getElementById('fail')).visibility, "hidden");
}));
</script>
